import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Input, Icon, message, Button, Form } from 'antd';
import styles from '../index.less';
import AuctionModal from '../../AuctionModal';
import CoverModal from '../../AuctionModal/CoverModal';
import AuctionImageModal from '../../AuctionModal/AuctionImageModal';

const FormItem = Form.Item;
const { TextArea } = Input;

@connect(state => ({

}))
@Form.create()

export default class BodyAddItemsContent extends PureComponent {
  state = {
    itemArr:[],
    auctionChoose:{}
  }
  componentDidMount() {
    const propsData = this.props.value.data;
    console.log(propsData);
    if (propsData.items[0].item_title !== '这里显示宝贝标题') {
      this.setState({
        itemArr:propsData.items
      })
    }
  }

  componentWillReceiveProps(nextProps) {
    
  }
  handleShowModal = () => {
    this.props.dispatch({
      type: 'auction/show',
      payload: { currentKey: 'BodyAddItemsContent' }
    });
  }

   handleAddItem = (auction) => {
    console.log(auction);
    const { props } = this.props;
    let items = [];
    const data = {
      attrs: {},
      data:{
        items:[{
          itemImages:auction.images,
          item_numiid:auction.item.itemId,
          itemPriceDTO:{
            price:{
              item_current_price:auction.item.reservedPrice,
              item_price:auction.item.finalPrice
            }
          },
          item_pic:auction.url,
          item_title:auction.title,
          materialId:auction.materialId
        }]
      }
    };
    items = [...this.state.itemArr,data.data.items[0]]
    this.setState({
      itemArr: items,
      auctionChoose: auction
    })
    if (this.props.onChange) {
      this.props.onChange(data);
    }
    if (props.enableExtraBanner) {
      this.props.dispatch({
        type: 'album/showAuctionImage',
        payload: {
          formData: data,
          currentKey: this.props.name,
        }
      });
    }
  }
  handleAddItemsCtChange = (val) => {
    console.log(val);
  }


  handleEditProduct = () => {
    console.log('1111',this.props);
    if (this.state.auctionChoose && this.state.auctionChoose.url) {
      if (this.props.k === 'editor') {
        this.props.dispatch({
          type: 'album/showCover',
          payload: {
            coverKey: `auction_${this.props.currentKey}`,
            auction: this.state.auctionChoose,
          }
        });
      } else {
        if (this.props.onOk) this.props.onOk(this.state.auctionChoose);
        this.props.dispatch({
          type: 'auction/hide',
        });
      }
    } else {
      this.props.dispatch({
        type: 'auction/hide',
      });
    }
  }


  handleRemoveProduct = (index) => {
    this.state.itemArr.splice(index, 1);
    if (this.props.onChange) this.props.onChange(this.state.itemArr);
  }

  handleChangeBodyImg = (lastValue, coverUrl, extraBanners) => {
    const { props } = this.props;
    if (this.props.onChange) {
      const value = [...props.value];
      const index = value.findIndex(item => item.itemId === lastValue.itemId);
      value[index] = {
        ...value[index],
        coverUrl: coverUrl,
        extraBanners: extraBanners,
      };
      this.props.onChange(value);
    }
  }
  handleChangeImg = (lastValue, coverUrl, title) => {
    const { props } = this.props;
    if (this.props.onChange) {
      const value = [...props.value];
      const index = value.findIndex(item => item.itemId === lastValue.itemId);
      value[index] = {
        ...value[index],
        coverUrl,
        title,
      };
      this.props.onChange(value);
    }
  }

  handleChooseCover = (lastValue, coverUrl, title) => {
    const auction = this.state.auctionChoose;
    auction.coverUrl = coverUrl;
    auction.title = title;
    if (this.props.onOk) this.props.onOk(auction);
    this.props.dispatch({
      type: 'auction/hide',
    });
  }

  handleOk = () => {
    console.log(this.state.itemArr);
    if (this.props.onChange) {this.props.onChange(this.state.itemArr);console.log(this.props);};

  }
  render() {
    const { props, value, operation, form: { getFieldDecorator }, moduleInfo } = this.props;
    const { itemArr } = this.state;
    return (
      <div>
        <div style={{marginBottom: 20}}>
          <div className={styles.upCover} style={{width:'120px',height:'120px'}} onClick={this.handleShowModal}>
            <div style={{ position: 'absolute', top: '50%', marginTop: -33, width: '100%'}}>
              <Icon type="plus"/>
              <p style={{ fontSize: 14 }}>{props.uploadTips || '添加宝贝'}</p>
            </div>
          </div>
          <div style={{overflow:'hidden'}}>
          { itemArr.map((item, index) =>
            <div key={`imgShowBox${index}`} className={styles.imgShowBox} style={{ width: 120, height: 120, margin: 5, float:'left' }}>
              <img src={item.item_pic}/> 
              <div className={styles.clearImg}>
                <div onClick={() => this.handleEditProduct(item)} style={{fontSize:'12px'}}>
                  点击完善资料
                </div>
                <div onClick={() => this.handleRemoveProduct(index)}>
                  <Icon type="delete" />
                </div>
              </div>
            </div>)
          }
          </div>
        </div>
        <div>
          <p style={{color:'#aaa',fontSize:'12px'}}>请上传段落中展示的宝贝并对宝贝信息进行完善编辑</p>
          <span style={{color:'#dd231f',fontSize:'14px'}}>不能小于最小数量限制2</span>
        </div>
        <div style={{ height: '40px' }}>
          <Button type="primary" style={{ float: 'right' }} onClick={this.handleOk}>确定</Button>
        </div>
        <AuctionModal k="BodyAddItemsContent" onOk={this.handleAddItem} activityId={props.activityId || 0}/>
        <AuctionImageModal k='BodyAddItemsContent' onChange={this.handleChangeBodyImg} />
        <CoverModal k='BodyAddItemsContent' onOk={this.handleChangeImg} />
      </div>
    );
  }
}
